<div id="app">
    <button @click="changeCon">改变内容</button>

    <button @click="destroy">销毁</button>

    <button id="mountBtn" @click="mountBtn">调用mount</button>

    <p class="content">{{ message }}</p>
</div>

<script src="./lib/vue-2.6.12.js"></script>
<script type="text/javascript">
    const vm = new Vue({
        el: '#app',//el
        data: {
            message: 'Hello Vue!'
        },
        methods: {
            // 显示
            show() {
                console.log('show方法被调用')
            },
            // 改变内容
            changeCon() {
                this.message = '我是由“改变内容”按钮所触发!'
            },
            // 销毁
            destroy: function () {
                this.$destroy()//调用$destroy()方法
            },
            // 调用mount
            mountBtn: function () {
                app.$mount("#app")
            }
        },
        beforeCreate() {
            console.log('------初始化前beforeCreate------')

            //无法操作 data 中的数据
            console.log(this.message)

            //无法取出dom节点取数据
            console.log(this.$el)
        },

        // 页面在内存中已经初始化完毕：
        // 可以操作 data 中的数据、调用methods中的方法
        // 但是数据尚未被渲染到页面中：用户看不见
        created() {
            console.log('------初始化完成created------')

            //可以操作 data 中的数据
            console.log(this.message)

            //可以调用methods中的方法
            this.show()

            //无法取出dom节点取数据
            console.log(this.$el)
        },
        beforeMount() {
            console.log('------挂载前beforeMount---------')
            console.log(this.message)

            // 可以取出dom节点数据
            console.log(this.$el)
        },

        // 数据已经被渲染到页面中
        mounted() {// 第四个被执行的钩子方法
            console.log('------挂载完成mounted---------')
            console.log(this.message)
            console.log(this.$el)
            console.log(this.$el.innerHTML)
        },
        beforeUpdate() {
            console.log('------更新前beforeUpdate---------')
            console.log(this.message)
            console.log(this.$el)
            console.log(this.$el.innerHTML)
        },
        updated() {
            console.log('------更新后updated---------')
            console.log(this.message)
            console.log(this.$el)
            console.log(this.$el.innerHTML)
        },
        beforeDestroy: function () {
            console.log('------销毁前beforeDestroy---------')
            this.message = '我是销毁前改的内容'
            console.log(this.message)
            console.log(this.$el)
            console.log(this.$el.innerHTML)
        },
        destroyed: function () {
            console.log('------销毁后destroyed---------')
            this.message = '我是销毁后改的内容'
            console.log(this.message)
            console.log(this.$el)
            console.log(this.$el.innerHTML)
        }
    })
</script>